@use 'sass:color';

// Primary colors
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;

html {
  // text
  --text-color: rgb(0 0 0 / 85%);

  // border
  --border-color: #eee;

  // header
  --header-bg-color: #394664;
  --header-bg-hover-color: #273352;
  --header-active-menu-bg-color: #273352;

  // sider
  --sider-dark-bg-color: #273352;
  --sider-dark-darken-bg-color: #273352;
  --sider-dark-lighten-bg-color: #273352;

  // component
  --component-background-color: #fff;

  // app
  --app-content-background-color: #fafafa;

  // custom color example
  --custom-example-color: #ff4d4f;

  // dark theme
  &[data-theme='dark'] {
    // text
    --text-color: #c9d1d9;

    // border
    --border-color: #303030;

    // component
    --component-background-color: #151515;

    // app
    --app-content-background-color: #1e1e1e;

    // custom color example
    --custom-example-color: #55d187;
  }
}

$white: #fff;

$content-bg: #f4f7f9;

$border-color-base: var(--border-color);

$text-color-secondary: #8b949e;

$component-background: var(--component-background-color);

// :export {
//   name: "less";
//   mainColor: $mainColor;
//   fontSize: $fontSize;
// }
$iconify-bg-color: #5551;

// =================================
// =========border-color============
// =================================

// Dark-dark
$border-color-dark: #b6b7b9;

// Dark-light
$border-color-shallow-dark: #cececd;

// Light-dark
$border-color-light: $border-color-base;

// =================================
// ============message==============
// =================================

// success-bg-color
$success-background-color: #f1f9ec;
// info-bg-color
$info-background-color: #e8eff8;
// warn-bg-color
$warning-background-color: #fdf6ed;
// danger-bg-color
$danger-background-color: #fef0f0;

// =================================
// ==============Header=============
// =================================
$header-dark-bg-color: var(--header-bg-color);
$header-dark-bg-hover-color: var(--header-bg-hover-color);
$header-light-bg-hover-color: #f6f6f6;
$header-light-desc-color: #7c8087;
$header-light-bottom-border-color: #eee;
// top-menu
$top-menu-active-bg-color: var(--header-active-menu-bg-color);

// =================================
// ==============Menu===============
// =================================

// let -menu
$sider-dark-bg-color: var(--sider-dark-bg-color);
$sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
$sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);

// trigger
$trigger-dark-hover-bg-color: rgb(255 255 255 / 20%);
$trigger-dark-bg-color: rgb(255 255 255 / 10%);

// =================================
// ==============tree===============
// =================================
// tree item hover background
$tree-hover-background-color: #f5f7fa;
// tree item hover font color
$tree-hover-font-color: #f5f7fa;

// =================================
// ==============link===============
// =================================
$link-hover-color: $primary-color;
$link-active-color: color.adjust($primary-color, $lightness: -10%);

// =================================
// ===========Text color============
// =================================

// Main text color
$text-color-base: var(--text-color);

// =================================
// =======app content color=========
// =================================
$app-content-background: var(--app-content-background-color);

// Label color
$text-color-call-out: #606266;

// Auxiliary information color-dark
$text-color-help-dark: #909399;

// =================================
// ============breadcrumb===========
// =================================
$breadcrumb-item-normal-color: #999;
// =================================
// ==============button=============
// =================================

$button-primary-color: $primary-color;
$button-primary-hover-color: color.adjust($primary-color, $lightness: 5%);
$button-primary-active-color: color.adjust($primary-color, $lightness: -5%);

$button-ghost-color: $white;
$button-ghost-hover-color: color.adjust($white, $lightness: 10%);
$button-ghost-hover-bg-color: #e1ebf6;
$button-ghost-active-color: color.adjust($white, $lightness: -10%);

$button-success-color: $success-color;
$button-success-hover-color: color.adjust($success-color, $lightness: 10%);
$button-success-active-color: color.adjust($success-color, $lightness: -10%);

$button-warn-color: $warning-color;
$button-warn-hover-color: color.adjust($warning-color, $lightness: 10%);
$button-warn-active-color: color.adjust($warning-color, $lightness: -10%);

$button-error-color: $error-color;
$button-error-hover-color: color.adjust($error-color, $lightness: 10%);
$button-error-active-color: color.adjust($error-color, $lightness: -10%);

$button-cancel-color: $text-color-call-out;
$button-cancel-bg-color: $white;
$button-cancel-border-color: $border-color-shallow-dark;

// Mouse over
$button-cancel-hover-color: $primary-color;
$button-cancel-hover-bg-color: $white;
$button-cancel-hover-border-color: $primary-color;

// =================================
// =====custom color example========
// =================================
$custom-example-color: var(--custom-example-color);

// 下面都是由less升级到scss后提示没有的变量，自己加的。
$modal-mask-bg: var(--ant-color-bg-mask, rgb(0 0 0 / 45%));
$item-active-bg: #e6f4ff;
$background-color-light: #fafafa;
$disabled-color: #00000040;
$item-hover-bg: rgb(0 0 0 / 6%);
